<template>
  <div style="width: 1200px; margin: 0 auto; text-align: center" v-loading="loading">
    <div class="navBar">
      <ul>
        <li>综合榜</li>
        <li>热练榜</li>
        <li>新锐榜</li>
        <li>最新</li>
      </ul>
    </div>
    <ResourcesList :recommendList="recommendList" @addCount="addCount" :count="count" />
    <el-button>加载更多</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "special",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getRecommendRequest } from "@/api";
import type { contentType } from "@/api";

let loading = ref(true);
let count = ref(20);

// 推荐资源
let recommendList = ref<contentType[]>([]);
async function getRecommend(count: number) {
  const res = await getRecommendRequest(count);
  // console.log(res.content, "getRecommend");
  recommendList.value = res.content;
  loading.value = false;
}
getRecommend(count.value);

watch([count], () => {
  getRecommend(count.value);
});

function addCount() {
  count.value = 40;
}
</script>

<style lang="less" scoped>
.navBar {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
  ul {
    li {
      float: left;
      margin-right: 60px;
      line-height: 70px;
      &:nth-child(1) {
        color: red;
        margin-left: 40px;
      }
    }
  }
}

.el-button {
  width: 140px;
  height: 42px;
  border: 1px solid #eaecf0;
  color: #82858e;
  font-size: 14px;
  margin: 30px auto 80px;
}
</style>
